<template>
    <div>
        <TopNav :obj="obj"></TopNav>
        <SensorForm class="m-b" :total="total" :getData="getData"></SensorForm>
        <SensorTable :tableData="tableData" :pageObj="pageObj" :total="total" :getData="getData"></SensorTable>
    </div>
</template>

<script>
import TopNav from '@/components/TopNav.vue';
import SensorTable from './components/SensorTable.vue'
import SensorForm from './components/SensorForm.vue'
import { $SensorData } from '@/api'
import { defineComponent, reactive, onMounted, toRefs } from 'vue'

export default defineComponent({
    name: 'SensorList',
    components: { TopNav, SensorTable, SensorForm },
    setup() {
        const Data = reactive({
            obj: {
                path: '设备',
                title: '传感器列表',
                msg: '展示EUI、名称、状态、等设备信息，可以根据EUI、状态、和绑定时间等条件筛选具体传感器节点，并提供移动群组等功能。'
            },
            tableData: [],
            pageObj: {
                currPage: 1,
                pageSize: 5,
                eui: '',
                online: null,
                agreement: '',
                date: null
            },
            total: 1,
        })
        onMounted(() => {
            getData()
        })
        const getData = (obj) => {
             if (obj) {
                Data.pageObj = { ...obj }
            }
            $SensorData(Data.pageObj).then(res => {
                Data.tableData = res.data.data;
                Data.total = res.data.total
            })
        }
        return { ...toRefs(Data), getData }
    }


});
</script>

<style lang="less" scoped>
.m-b {
    margin-bottom: 10px;
}
</style>